//混入(mixin)通过 @mixin 指令来定义。 
//@mixin name { property: value; property: value; ... }
//selector { @include mixin-name;}引入@mixin

@mixin my_p1 {
    //声明my_p1
    color: red;

    font: {
        size: 25px;
        weight: bold;
    }

    border: 1px solid blue;
}

//混入中也可以包含混入
@mixin my_p2 {
    @include my_p1;
    background-color: aqua;
}

.p1 {
    @include my_p1 //引入@mixin
}

.p2 {
    @include my_p2
}

//混入可以接收参数
@mixin bordered($color, $width) {
    /* 混入接收两个参数 */
    border: $width solid $color;
    a{
        color: darken($color, 20%)//darken颜色加深20%
    }
}

.myArticle {
    @include bordered(blue, 1px); // 调用混入，并传递两个参数
}

.myNotes {
    @include bordered(red, 2px); // 调用混入，并传递两个参数
}

//混入的参数也可以定义默认值
@mixin sexy-border($color, $width: 1in) {
    border: {
        color: $color;
        width: $width;
        style: dashed;
    }
}

p {
    @include sexy-border(blue);
}

h1 {
    @include sexy-border(blue, 2in);
}
//可变参数,有时，不能确定一个混入（mixin）或者一个函数（function）使用多少个参数，这时我们就可以使用 ... 来设置可变参数
@mixin box-shadow($shadows...) {
    -moz-box-shadow: $shadows;
    -webkit-box-shadow: $shadows;
    box-shadow: $shadows;
}

.shadows {
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
//浏览器前缀使用混入
@mixin transform($property) {
    -webkit-transform: $property;
    -ms-transform: $property;
    transform: $property;
  }
  
  .myBox {
    @include transform(rotate(20deg));
  }